import { FileUpload, FormRender, FormTree } from '@/components';
import { isEmptyArray } from '@/utils/index';
import {
  Cascader,
  Checkbox,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Radio,
  Rate,
  Select,
  Switch,
  TreeSelect,
} from 'antd';
import { FORM_TYPE } from './index';
import type { ConfigProps, FormItemTypes } from './type.d.ts';

const commonItemProps = {
  style: { width: '100%' },
  allowClear: true,
};

// 根据类型生成表单组件
export const generateFormItem = (
  type?: FormItemTypes,
  render?: any,
  { ...props }: Record<string, any> = {},
) => {
  switch (type) {
    case 'render':
      return <FormRender render={render} />;
    case 'input':
      return (
        <Input
          placeholder="请输入"
          maxLength={30}
          {...commonItemProps}
          {...props}
        />
      );
    case 'textarea':
      return (
        <Input.TextArea
          placeholder="请输入"
          maxLength={100}
          {...commonItemProps}
          {...props}
        />
      );
    case 'inputNumber':
      return (
        <InputNumber placeholder="请输入" {...commonItemProps} {...props} />
      );
    case 'select':
      return <Select placeholder="请选择" {...commonItemProps} {...props} />;
    case 'tree':
      return (
        <FormTree
          {...props}
          treeData={Array.isArray(props?.treeData) ? props?.treeData : []}
        />
      );
    case 'checkbox':
      return <Checkbox.Group {...commonItemProps} {...props} />;
    case 'cascader':
      return <Cascader placeholder="请选择" {...commonItemProps} {...props} />;
    case 'radio':
      return <Radio.Group {...props} />;
    case 'switch':
      return <Switch {...props} />;
    case 'rate':
      return <Rate {...props} />;
    case 'date':
      return <DatePicker {...commonItemProps} {...props} />;
    case 'dateRange':
      return <DatePicker.RangePicker {...commonItemProps} {...props} />;
    case 'upload':
      return <FileUpload {...props} />;
    case 'treeSelect':
      return <TreeSelect {...commonItemProps} {...props} />;
    case 'custom':
      return render();
    default:
      return null;
  }
};

// 根据配置生成表单项
export const getFormItems = (
  configList: ConfigProps[],
  formType: FORM_TYPE,
) => {
  if (isEmptyArray(configList)) return null;
  const renderFormItem = ({
    dataIndex,
    title,
    type,
    formProps,
    itemProps,
    render,
  }: ConfigProps) => {
    const labelContent = typeof title === 'function' ? title({}) : title;
    const { search, edit, ...props } = formProps || {};
    const {
      search: itemSearch,
      edit: itemEdit,
      ...otherProps
    } = itemProps || {};

    const formItemProps = {
      ...props,
      ...(formType === FORM_TYPE.SEARCH ? search : edit),
    };
    const _itemProps = {
      ...otherProps,
      ...(formType === FORM_TYPE.SEARCH ? itemSearch : itemEdit),
    };
    return (
      <Form.Item
        key={dataIndex}
        label={labelContent}
        name={dataIndex}
        {...formItemProps}
      >
        {generateFormItem(type, render, _itemProps)}
      </Form.Item>
    );
  };

  return configList.map(
    (
      {
        title,
        dataIndex,
        type,
        formProps,
        itemProps,
        render,
        updateConfig: { dependencies, updateItems, updateRules } = {},
      },
      index,
    ) =>
      dependencies && updateItems && updateRules ? (
        <Form.Item key={dataIndex || index} noStyle dependencies={dependencies}>
          {({ getFieldValue }) => {
            const rulesList = updateRules(getFieldValue);
            if (isEmptyArray(rulesList)) return null;
            return rulesList.map((item, index) => {
              return item ? getFormItems(updateItems[index], formType) : null;
            });
          }}
        </Form.Item>
      ) : (
        renderFormItem({ title, dataIndex, type, formProps, itemProps, render })
      ),
  );
};
